<#import '/ftlLibrary/properteisVariable.ftl' as pv/>
<link href='assets/css/fullcalendar/fullcalendar.css' rel='stylesheet'/>
<script src='assets/js/fullcalendar/fullcalendar.js'></script>
<style>
    .fc-event-title {
        color: blue;
    }

    .fc-event-hori {
        background-color: red;
    }

    .modal-body {
        padding: 0px !important;
    }

    .modal-body > .bootbox-close-button {
        display: none;
    }
    .bootbox-close-button {
        width: 19px;
        height: 19px;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        float: right;
        top: 4px;
        left: -5px;
        position: relative;
        background: #E9F5FF url("assets/img/nav-img/icon_close.png") no-repeat 0 0;
    }

    .padding-top-15 {
        padding-top: 15px !important;
    }

    .bs-example label{
        margin:0px!important;
    }
    .tssClassesListDialog  .modal-dialog{
        width: 60%;
    }
    .basicInfo input[type=radio]:checked + .text:before,
    .basicInfo input[type=checkbox] + .text:before, input[type=radio] + .text:before {
        border-radius: 100%;
    }

    .backgroundColor {
        background: #ccc;
    }
</style>
<script>

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth()+1;
    var y = date.getFullYear();

    function getBeforeDate(n, inputval) {
        var n = n;
        var date = new Date(inputval);
        var year = date.getFullYear();
        var mon = date.getMonth() + 1;
        var day = date.getDate();
        if (day <= n) {
            if (mon > 1) {
                mon = mon - 1;
            }
            else {
                year = year - 1;
                mon = 12;
            }
        }
        date.setDate(date.getDate() + n);
        year = date.getFullYear();
        mon = date.getMonth() + 1;
        day = date.getDate();
        var s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }

    function abc() {
        // 课程名称
        var systemPid = $("#systemPid").val();
        if (!systemPid) {
            logger.error('请选择课程名称');
            return false
        }
        // 课程名称
        var courseIdVal = $("#courseId").val();
        if (!courseIdVal) {
            logger.error('请选择课程名称');
            return false
        } else {
            var courseId = $("#courseId").find("option:selected").text();
        }
        // 开班日期
        var inputVal = $("#inputDiv").val();
        if (!inputVal) {
            logger.error('请选择开班日期');
            return false
        }
        // 上课时间
        var startTimes = $("#startTimes").val();
        if (!startTimes) {
            logger.error('请选择上课时间');
            return false
        }
        var endTimes = $("#endTimes").val();
        if (!endTimes) {
            logger.error('请选择上课时间');
            return false
        }
        // 上课教室
        var roomId = $("#classRoomId").val();
        if (!roomId) {
            logger.error('请选择上课教室');
            return false
        }
        // 授课老师
        var empAdminUserId = $("#empAdminUserId").val();
        if (!empAdminUserId) {
            logger.error('请选择上课教室');
            return false
        }
        // 课程节数
        var pitchNumber = $("#selectDiv").val();
        if (!pitchNumber) {
            logger.error('请选择上课教室');
            return false
        }
        // 单节消耗课时
        var expendClassHour = $("#expendClassHour").val();
        if (!expendClassHour) {
            logger.error('请选择单节消耗课时');
            return false
        }


        $("#calendar").show();
        $(".fc-button-today").click();
        var inputVal = $("#inputDiv").val();
        var selectVal = $("#selectDiv  option:selected").text();
        if (inputVal && Number(selectVal)) {
            var size = $('.event').find('.date').size();

            if (size > 0) {
                $("#calendar").find('.fc-header').remove();
                $("#calendar").find('.fc-content').remove();
                $("#calendar").find('.event').html('');
            }
            var dayArray = [];
            for (var j = 0; j < selectVal; j++) {
                var n = j * 7;
                var newYear = getBeforeDate(n, inputVal);
                dayArray.push(newYear);
            }
            for (var i = 0; i < selectVal; i++) {
                var html = '<input type="hidden" class="date" value="' + dayArray[i] + '"/>';
                $(".event").append(html);
            }
            var myEvents = [];
            $('.event').find(".date").each(function (i, item) {
                myEvents.push({
                    title: courseId,
                    className: 'dateEvent',
                    start: $(this).val(),
                    allDay: true
                });
            })
            $('#calendar').fullCalendar({
                // 头部信息
                header: {
                    left: 'prevYear,nextYear',
                    center: 'title',
                    right: 'today prev,next'
                },
                events: myEvents,
                handleWindowResize: false,
                eventClick: function (calEvent, jsEvent, view) {
                    var selDate = $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd');
                    if (confirm("您确定要删除吗？")) {
                        $(".event").find(".date").each(function () {
                            if ($(this).val() == selDate) {
                                $(this).remove();
                            }
                        });
                        for (var i = 0; i < myEvents.length; i++) {
                            var myEvent = myEvents[i];
                            if (myEvent.start == calEvent.start) {
                                myEvents.splice(i, 1)
                            }
                        }
                        $(this)[0].remove();
                        zzObj()
                    }
                },
                dayClick: function () {
                    var selDate = $(this).data("date");//格式化日期
                    var size = $('.event').find(".date").size();
                    var num = 0;
                    $('.event').find(".date").each(function () {
                        if( $(this).val()==selDate){
                            num++;
                        }
                    })
                    if(num>0){
                        return;
                    }
                    if (size >= selectVal) {
                        alert("课程节数已超出");
                        return;
                    } else {
                        var selDate = $(this).data("date");//格式化日期
                        dayArray.push(selDate);
                        var html = '<input type="hidden" class="date" value="' + selDate + '">';
                        $(".event").append(html);
                        myEvents.push({
                            title: courseId,
                            className: 'dateEvent',
                            start: selDate,
                            allDay: true
                        });
                        $('#calendar').fullCalendar('refetchEvents')
                    };
                    zzObj()

                }
            });
            zzObj()
        }
    }
    //提交表单 组装课程数据
    function zzObj() {
        var obj = [];
        var index=1;
        $(".event").find(".date").each(function () {
            var classTimeObj = {};
            var classTime = $(this).val();
            var weekDay = new Date(classTime).getDay();
            classTimeObj.classIndexTime = index;
            classTimeObj.classTime = classTime;
            classTimeObj.weekDay = weekDay;
            obj.push(classTimeObj);
            index++
        })
        var newObj = JSON.stringify(obj);
        $("[name='lessonsObject']").val(newObj);
        $("[name='endDate']").val(obj[obj.length-1].classTime);
        console.log(obj[obj.length-1].classTime);
        console.log(newObj);
    }

    function match(that) {
        var inputVal = $("#inputDiv").val();
        var date1 = new Date(inputVal);
        var week = date1.getDay();
        var val = Number($(that).val());
        if (week != val) {
            logger.error('您选择的开班日期与星期不匹配请重新选择！');
            $(that).val('');
        }
    }

</script>
<div class="col-lg-12 col-sm-12 col-xs-12" style="padding: 0;">
    <div class="modal-header">
        <button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">创建班级</h4>
    </div>
    <div class="modal-body" style="padding-top: 0px!important">
        <div class="row"
             style="margin: 0;padding-top: 20px;padding-left: 15px!important;padding-right: 15px!important;">
            <form class="editForm"  action="${saveUrl}" method="post" responseType="JSON" role="form" style="margin-bottom: 0px!important;"
                  id="editForm_${serializeNum}"
                  data-bv-submitButtons="#editFormSubmitBtn_${serializeNum}"
                  data-bv-message="This value is not valid"
                  data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
                  data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
                <div class="row searchInput" style="margin: 0;">
                    <div class="col-xs-12 nopadding-left nopadding-right">
                        <!--<label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">-->
                            <!--<label style="width: 95px;text-align: center">班级名称：</label>-->
                            <!--<label>-->
                                <!--<input type="text" name="name"-->
                                       <!--style="width: 160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;">-->
                            <!--</label>-->
                        <!--</label>-->
                        <label class="col-xs-7 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center"><span style="color: red">*</span>课程名称：</label>
                            <label>
                                <select class="form-select-1 systemPid" name="systemPid" style="width: 160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" id="systemPid">
                                </select><select class="form-select-1 courseId" name="courseId" id="courseId" style="width: 160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" >
                                <option value="">请选择</option>
                            </select>
                            </label>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center"><span style="color: red">*</span>开班日期：</label>
                            <!-- <input  type="text" name="startDate" onFocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"
                                    style="height: 30px;" id="inputDiv"/>-->
                            <label>
                                <input data-bv-date-format="YYYY-MM-DD"
                                       data-bv-message="The field is not valid"
                                       data-bv-date-message="请正确输入一个时间" data-bv-date="true" size="10"
                                       name="startDate" alt="开班日期" placeholder="开班日期"
                                       type="text" title="开班日期"
                                       class="form-control form-control date-picker Wdate"
                                       onfocus="WdatePicker({doubleCalendar:false,dateFmt:'yyyy-MM-dd'},checkWeek())"
                                       style="height: 30px;width:160px;border-radius: 4px!important;border: 1px solid #c6d5d8;" id="inputDiv" />
                            </label>
                        </label>
                    </div>

                    <div class="col-xs-12 nopadding-left nopadding-right">
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center"><span style="color: red">*</span>上课时间：</label>
                            <label>
                                <input type="text" class="beginValue Wdate" placeholder="请选择" name="startTimes" id="startTimes"
                                       onFocus="WdatePicker({doubleCalendar:false,dateFmt:'HH:mm'})" style="width: 70px;vertical-align: middle;height: 30px!important;padding-left:3px!important;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                                至
                                <input type="text" class="beginValue Wdate" placeholder="请选择" name="endTimes" id="endTimes"
                                       onFocus="WdatePicker({doubleCalendar:false,dateFmt:'HH:mm'})" style="width: 70px;vertical-align: middle;height: 30px!important;padding-left:3px!important;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                            </label>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center"><span style="color: red">*</span>上课教室：</label>
                            <label>
                                <select class="form-select-1 roomId" name="roomId" id="classRoomId" style="width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                                </select>
                            </label>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 98px;text-align: right"><span style="color: red">*</span>授课老师：</label>
                            <label>
                                <select class="form-select-1" name="empAdminUserId" id="empAdminUserId" style="
                                    width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                                </select>
                            </label>
                        </label>
                    </div>

                    <div class="col-xs-12 nopadding-left nopadding-right">
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center"><span style="color: red">*</span>课程节数：</label>
                            <select name="pitchNumber" class="form-select-1" id="selectDiv"
                                    style="width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" >
                                <option value="">请选择</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="24">24</option>
                                <option value="36">26</option>
                                <option value="48">48</option>
                            </select>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 15px;">
                            <label style="width: 95px;text-align: center"><span style="color: red">*</span>周几上课：</label>
                            <select name="weekDay"  class="form-select-1" id="weekDiv"
                                    style="width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" onchange="match(this)">
                                <option value="">请选择</option>
                                <option value="1">星期一</option>
                                <option value="2">星期二</option>
                                <option value="3">星期三</option>
                                <option value="4">星期四</option>
                                <option value="5">星期五</option>
                                <option value="6">星期六</option>
                                <option value="0">星期日</option>
                            </select>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 15px;">
                            <label style="width: 98px;text-align: right"><span style="color: red">*</span>单节消耗课时：</label>
                            <label>
                                <select name="expendClassHour" class="form-select-1"
                                        style="width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" id="expendClassHour" >
                                    <option value="">请选择</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
                            </label>
                        </label>
                    </div>
                    <div class="col-xs-12 nopadding-left nopadding-right text-align-right">
                        <label>
                            <a style="border-radius: 0px;border: none;background: #ffab00 !important;"
                                    class="btn btn-warning shiny search margin-right-10" unselectable="on" onclick="abc()">
                                <i class="fa fa-search"></i>排课预览
                            </a>
                        </label>
                        <label>
                            <button type="submit" style="border-radius: 0px;border: none;background: #ffab00 !important;" onclick="return checkCount()"
                                    class="btn btn-warning shiny search margin-right-10"  id="editFormSubmitBtn_${serializeNum}"><i class="fa fa-search"></i>完成并同步课程表
                            </button>
                        </label>
                    </div>
                </div>
                <input type="hidden" name="lessonsObject" class="lessonsObject">
                <input type="hidden" name="endDate" class="endDate">
                <input type="hidden" name="type" value="1">
            </form>
        </div>

        <div class="row"
             style="margin: 0;padding-top: 20px;padding-left: 15px!important;padding-right: 15px!important;">
            <div id='calendar' style="display: none">
                <div class="event">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
     // 根据时间选中星期
     function checkWeek() {
        var inputVal =  $("#inputDiv").val();
        if(inputVal){
            var weekArr=new Array('1','2','3','4','5','6','0');
            var day=new Date(inputVal).getDay();
            var week;
            if(day){
                week = weekArr[day-1];
            }else{
                week = "0";
            }
            $("#weekDiv").val(week);
        }else{
            $("#weekDiv").val("");
        }
     }

    /**
     * 获取课程体系
     */
    $(function(){
        ajaxRequest("tssCourseController/queryGroupBySystemPid.do",{
            type:1
        }, function (result) {
            var data=result.data;
            var arr=['<option value="">请选择</option>'];
            $.each(data,function(i,t){
                arr.push('<option value="'+t.systemPid+'">'+t.name+'</option>')
            })
            $(".systemPid").html(arr.join(''))
        },function(){
            ajaxError("加载课程体系失败");
        }, "post","json")
    });

    /**
     * 获取课程体系下课程名称
     */
    $(".systemPid").change(function(){
        var nowSelectedProvince=$(this).val();
        ajaxRequest("tssCourseController/queryListBySystemPid.do", {
            systemPid: nowSelectedProvince,
            type:1
        }, function (result) {
            var data=result.data;
            var arr=['<option value="">请选择</option>'];
            $.each(data,function(i,t){
                arr.push('<option value="'+t.id+'">'+t.name+'</option>')
            })
            $(".courseId").html(arr.join(''))

        }, function () {
            ajaxError("加载课程名称失败")
        }, "post", "json")
    });

</script>
<script src="assets/js/validation/bootstrapValidator_init.js"></script>
<script>

    $(function(){
        /**
         * 获取教师
         */
        ajaxRequest("sysAdminUserController/getPostListByDuty.do",{
            duty:6
        }, function (result) {
            var data=result.data;
            var arr=['<option value="">请选择</option>'];
            for (var i = 0; i< data.length; i++) {
                arr.push('<option value="'+data[i].id+'">'+data[i].realName+'</option>')
            }
            $("#empAdminUserId").html(arr.join(''))
        },function(){
            ajaxError("加载员工信息失败");
        }, "post","json");

        /**
         * 获取教室
         */
        ajaxRequest("tssClassRoomController/getClassRoomList.do",null, function (result) {
            var data=result.data;
            var arr=['<option value="">请选择</option>'];
            for (var i = 0; i< data.length; i++) {
                arr.push('<option value="'+data[i].id+'">'+data[i].name+'</option>')
            }
            $(".roomId").html(arr.join(''))
        },function(){
            ajaxError("加载教室信息失败");
        }, "post","json");

    });
    $(".selectpicker_${serializeNum}").select2();
    $("#editForm_${serializeNum}").bind("ajaxSubmitCallback", function (event, result) {
        if (result.resCode == 200) {
            alert("保存成功");

            bootbox.hideAll();
            toView('tssClassesController/tssClassesList.do?type=1',true,'POST',{pageSize:10})
        }else if(result.resCode == 302){

            var data=result.data;
            var arr=[''];
            for (var i = 0; i< data.length; i++) {
                arr.push(data[i].classTime);
            }
            alert(arr);
        }
    });

    function checkCount() {
        var selectNum = $("#selectDiv option:selected").val();
        var size = $(".event").find(".date").size();
        if (size == 0) {
            logger.error('请点击排课预览进行排课');
            return false;
        }
        if (size < selectNum) {
            logger.error('课程节数请选择完整');
            return false;
        }
    }

</script>
